<template>
  <div class="dashboard-container">
    <el-row class="tool-bar">
      <avue-data-panel :option="option"></avue-data-panel>
    </el-row>
    <el-row>
      <el-col :span="15" style="margin-top: 20px; padding-right: 20px">
        <el-header class="date-title">
          我的待审批 <el-badge :value="12" class="item"> </el-badge>
          <span style="font-size: 12px; float: right">更多 >> </span>
        </el-header>
        <el-table
          :data="tableData"
          style="width: 100%; padding: 10px; height: 340px; overflow-y: scroll"
        >
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="9" style="margin-top: 20px">
        <el-header class="date-title"> 考勤打卡 </el-header>
        <div class="work-box">
          <div class="clock-in">
            <span class="work-title">上 班</span>
            <span class="work-time">{{ nowTime }}</span>
          </div>
        </div>
        <span class="work-card-time">上班时间: 2022-05-23 21:56:33</span>
        <span class="work-card-time">下班时间: 2022-05-23 21:56:33</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="15" style="margin-top: 20px; padding-right: 20px">
        <el-header class="date-title">
          日程安排
          <span style="font-size: 12px; float: right">
            <i class="el-icon-plus"></i>添加日程
          </span>
        </el-header>
        <el-table
          :data="tableData"
          style="width: 100%; padding: 10px; height: 340px; overflow-y: scroll"
        >
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="9" style="margin-top: 20px">
        <el-header class="date-title">
          企业公告
          <span style="font-size: 12px; float: right">更多 >> </span>
        </el-header>
        <el-table
          :data="tableData"
          style="width: 100%; padding: 10px; height: 340px; overflow-y: scroll"
        >
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index.js";

export default {
  name: "Home",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      option: {
        span: 6,
        data: [
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: "全部流程",
            count: "102,400",
            icon: "el-icon-share",
            color: "#00a7d0",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: "审核中的",
            count: "81,212",
            icon: "el-icon-info",
            color: "rgb(27, 201, 142)",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: "通过的",
            count: "9,280",
            icon: "el-icon-success",
            color: "#67C23A",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: "驳回的",
            count: "9,280",
            icon: "el-icon-error",
            color: "rgb(230, 71, 88)",
          },
        ],
      },
      nowTime: "",
    };
  },
  created() {
    setInterval(() => {
      this.nowTime = parseTime(new Date());
    }, 1000);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.daily {
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
  text-align: left;
  line-height: 60px;
}
.date-title {
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
  text-align: left;
  line-height: 60px;
}
.check-list {
  height: 659px;
  background: #fff;
  margin-left: 30px;
}
.work-box {
  height: 339px;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
}
.work-box .work-title {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-left: 30%;
  margin-top: 30%;
}
.work-box .work-time {
  margin-left: 15%;
  color: #fff;
  position: relative;
  top: 10%;
}
.clock-in {
  margin-top: 7%;
  width: 200px;
  height: 200px;
  cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(145deg, #44a9ff, #3a8ee6);
  box-shadow: 20px 20px 60px #3686d9;
}
.work-card-time {
  display: block;
  text-align: center;
  margin-top: 5px;
  position: relative;
  font-size: 13px;
  top: -70px;
}
</style>
<style>
.tool-bar {
  background: #fff;
}
.tool-bar .avue-data-panel .item {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 0 80px !important;
}
</style>
